<template>
	<view class="container">
		<!-- 主体部分 -->
		<view class="main">
			<view class="expect-type">
				<view class="title">期望类型</view>
				<view class="list">
					<view v-for="(item, index) in tagTypeList" :key="index" :class=" tagTypeList.indexOf(requestObj.expectType) == index ? 'on' : '' ">
						<text @click="handleSelect(index, 0)">{{ item }}</text>
					</view>
				</view>
			</view>
			<view class="job-type">
				<view class="title">期望工种<span>(最多选择3种)</span></view>
				<view class="list">
					<view v-for="item in showJobTypeList" @click="handleCloseJob(item)">
						{{ item }}
						<image src="/static/61.png" mode="aspectFill" ></image>
					</view>
					<view class="add" @click="handleOpenModal" v-if="showJobTypeList.length<=2">+ 添加工种</view>
				</view>
			</view>
			<view class="expect-address">
				<view class="title">期望工作地点</view>
				<view class="list">
					<picker mode="selector" :range="addressList"  value="1" @change="bindTypeChange">
						<view class="pick">
							<view v-if="requestObj.expectAddress">{{ addressList[value] }}</view>
							<view class="add">+ 添加地点</view>
						</view>
					</picker>
				</view>
			</view>
			<view class="expect-time">
				<view class="title">接单时间</view>
				<view class="list">
					<view v-for="(item, index) in timeList" :key="index" :class=" timeList.indexOf(requestObj.expectWorkTime) == index ? 'on' : '' ">
						<text @click="handleSelect(index, 3)">{{ item }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 按钮 -->
		<view class="button" @click="handleSetUserInfo">确认</view>
		
		<!-- 弹框 -->
		<view class="modal" v-show="isModalShow">
			<view class="modal-main" :style="{bottom: modalBottom+'rpx'}">
				<view class="modal-title">
					<text>添加工种</text>
					<image @click="handleCloseModal" src="/static/icon1/47.png" mode="aspectFill"></image>
				</view>
				<view class="modal-list">
					<view v-for="(jobType, index) in jobTypeList" :key="index" @tap="handleSelect(index, 1)" :class="{'on': jobType.selected}" >
						<text>{{ jobType.name }}</text>
						<image v-show="jobType.selected" src="/static/icon1/48.png" mode="aspectFill"></image>
					</view>
					<view class="input-job" style="width: 250rpx;">
						<input :disabled="disabled" type="text" v-model="myInput" placeholder="自定义工种输入~" maxlength="4" @focus="upHeight" @blur="loseBlur"/>
					</view>
				</view>
				<view class="buttons">
					<view class="button" @click="handleClearJobType">重置</view>
					<view class="button" @click="handleAddJobType">确定</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import findKey from '@/libs/find-key.js'
	export default {
		data() {
			return {
				disabled: false,
				modalBottom: 0,//弹框bottom
				myInput: '',//我输入的标签
				street: {},//街道
				userInfo: { //当前用户信息
					user: {
						expectType: "类型不限",
						expectWorkType: '',
						expectAddress: '',
						expectWorkTime: '时间不限',
					}, 
					params: {} ,
				},
				
				isModalShow: false,//是否显示底部弹框
				tagTypeList: [],//期望类型
				tagTypeKeys: [],
				
				timeList:[],//接单时间
				timeKeys:[],
				
				addressList:[],//期望工作地点列表
				addressKeys: [],//期望工作地点key
				
				jobTypeList: [],//可选的期望工种，带select
				oldJobTypeList: [],//旧的期望工种
				oldJobTypeKeys: [],//
				showJobTypeList: [],//显示的期望工种
				
				selectTagsJob: [],//选中的标签2工种
				
				requestObj: { //上传参数
					expectType: '',//期望类型选中标签
					expectAddress: '',
					expectWorkType: '',
					expectWorkTime: '',//接单时间选中标签
				},
			}
		},
		methods: {
			//删除标签
			handleCloseJob(item) {
				// console.log('删除item', item,this.oldJobTypeList)
				this.handleSelect(this.oldJobTypeList.indexOf(item), 1)//
				// console.log('删除index', this.oldJobTypeList.indexOf(item),)
				this.handleAddJobType()
				
			},
			// 失去焦点
			loseBlur(event) {
				this.modalBottom = 0
				
			},	
					
			// 获取焦点
			upHeight(event) {
				this.modalBottom = event.detail.height
			},
			
			// 获取标签内容和选中的标签
			async get_all_property_list () {
				this.getMyStreet()
				let res = await this.$fetch(this.$api.get_all_property_list, {}, 'GET')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				//期望类型
				this.tagTypeList = Object.values(res.data.dlg_expect_type)
				this.tagTypeKeys = Object.keys(res.data.dlg_expect_type)
				
				this.timeList = Object.values(res.data.dlg_expect_workTime)
				this.timeKeys = Object.keys(res.data.dlg_expect_workTime)
				
				this.addressKeys = Object.keys(this.street)
				this.addressList = Object.values(this.street)
				
				//期望工种
				this.oldJobTypeList = Object.values(res.data.dlg_expect_work_type)//工种所有选择项
				this.oldJobTypeKeys = Object.keys(res.data.dlg_expect_work_type)
					// 改造oldJobTypeList，配置的选项成为jobTypeList[{name:'',selected: false},{}]
				this.jobTypeList = [] 
				this.oldJobTypeList.forEach((item) => {
					this.jobTypeList.push({ name: item, selected: false })
				})
				// console.log('配置+jobTypeList', this.jobTypeList)
				// 将自定义工种遍历加入jobTypeList
				if(this.userInfo.user.expectWorkType) {
					this.userInfo.user.expectWorkType.split(',').forEach((item) => {
						// 如果有自定义工种，添加到jobTypeList和oldJobTypeList
						if(this.oldJobTypeList.indexOf(item) == -1){
							this.jobTypeList.push({ name: item, selected: false })
							this.oldJobTypeList.push(item)
						}
						
					})	
				}
				
				// console.log('配置+自己所有标签', this.jobTypeList)
				// 初始化数据
				this.initData () 
			},
			
			// 初始化数据
			initData () {
				// 初始化期望类型
				if(this.userInfo.user.expectType) {
					this.handleSelect(this.tagTypeList.indexOf(this.userInfo.user.expectType), 0)
				}
				
				// 初始化期望工种
				if(this.userInfo.user.expectWorkType) {
					this.userInfo.user.expectWorkType.split(',').forEach((item) => {
						this.handleSelect(this.oldJobTypeList.indexOf(item), 1)//
						this.handleAddJobType()
					})
				}
				
				// 初始化工作地点
				this.value = this.addressKeys.indexOf(this.userInfo.user.expectAddress)
				this.requestObj.expectAddress = this.addressKeys[this.addressKeys.indexOf(this.userInfo.user.expectAddress)]
				
				// 初始化接单时间
				this.handleSelect( this.timeList.indexOf(this.userInfo.user.expectWorkTime), 3)
			},
			
			//选中标签，类型、工种、时间
			handleSelect (index, flag) {
				if(flag == 0) {		// 期望类型
					this.requestObj.expectType = this.tagTypeList[index]
					
				} else if(flag == 1) {	// 期望工种
					let jobType = this.jobTypeList[index]//{name：'', selected: ''}
					this.$set(jobType, 'selected', !jobType.selected)
					
					//得到新数组，选中的数组
					this.selectTagsJob = []
					this.jobTypeList.forEach(item => {
						if (item.selected) {
							this.selectTagsJob.push(item.name)
						}
					})
					this.handleAddJobType()
					// console.log('this.selectTagsJob', this.selectTagsJob)
				} else if(flag == 3) {	// 接单时间
					this.requestObj.expectWorkTime = this.timeList[index]
				}
			},
		
			// 选择工作地点
			bindTypeChange ({ detail: { value } }) {
				this.value = value
				console.log('选择工作地点', this.value)
				console.log('~~~~',this.street)
				console.log('~~~~',this.addressKeys)
				this.requestObj.expectAddress = this.addressKeys[value]
			},
			
			//打开弹框
			handleOpenModal () {
				this.isModalShow = true
			},
			
			
			//关闭弹框
			handleCloseModal () {
				this.isModalShow = false
				this.myInput = this.myInput.replace(/[^\u4E00-\u9FA5][\W]/g,'')
			},
			
			//显示已选择期望工种
			handleAddJobType () {
				if(this.myInput && this.selectTagsJob.length > 2) {
					return uni.showToast({ title: '工种不能多于3个', icon: 'none' })
				}else if(!this.myInput && this.selectTagsJob.length > 3) {
					return uni.showToast({ title: '工种不能多于3个', icon: 'none' })
				}
				let isX = /[^\u4E00-\u9FA5][\W]/g.test(this.myInput)
				if(isX){
					return uni.showToast({ title: '请输入文字', icon: 'none' })
					this.myInput = this.myInput.replace(/[^\u4E00-\u9FA5][\W]/g,'')
				}
				
				this.isModalShow = false
				this.showJobTypeList = this.selectTagsJob
				if(this.myInput){
					this.showJobTypeList.push(this.myInput)//加入刚输入的工种标签
					this.jobTypeList.push({name: this.myInput, selected: true})
					this.oldJobTypeList.push(this.myInput)
				}
				this.requestObj.expectWorkType = ''
				this.showJobTypeList.forEach((item)=>{
					this.requestObj.expectWorkType = this.requestObj.expectWorkType + ',' + item 
				})
				this.requestObj.expectWorkType = this.requestObj.expectWorkType.slice(1) 
				this.myInput = ''
			},
			
			// 重置期望工种split
			handleClearJobType () {
				this.showJobTypeList = []
				this.selectTagsJob = []
				this.myInput = ''
				if(this.selectTagsJob) {
					this.jobTypeList.forEach(item => {
						this.$set(item, 'selected', false)
					})
				}
			},
			
			//确认修改用户信息
			async handleSetUserInfo () {
				console.log('requestObj提交前', this.requestObj)
				let res = await this.$fetch(this.$api.upd_user, this.requestObj, 'POST')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				uni.showToast({ title: '修改成功~', icon: 'none' })
				setTimeout(() => { uni.switchTab({ url: '/pages/tabBar-2/tabBar-2' }) }, 1000)
				this.getUserInfo()
			},
			
			// 获取当前用户信息
			async getUserInfo () {
				let res = await this.$fetch(this.$api.get_current_user, {}, 'GET')
				// if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				if (res.code===531) {
					uni.navigateTo({
						url: '/pages/riskControl/riskControl',
					})
					return
				}
				// 整理数据,res.data.user为空，则改为""
				 Object.getOwnPropertyNames(res.data.user).forEach(function(key){
					res.data.user[key] = res.data.user[key] == null ? '' : res.data.user[key]
				})
				if(res.data.payPwdFlag){
					uni.setStorageSync('isHavePayPassword',true)
				}
				else{
					uni.setStorageSync('isHavePayPassword',false)
				}
				uni.setStorageSync('userInfo', res.data)
				uni.setStorageSync('userType', res.data.userType)
				this.userInfo = res.data
				this.userType = uni.getStorageSync('userType')
				uni.setStorageSync("level",res.data.user.level)//用户等级
			},
			
			// 获取街道
			getMyStreet() {
				// let areaCode = uni.getStorageSync('region').slice(0,6)
				let areaCode = '330782'
				let allStreet = uni.getStorageSync('street')
				let obj = {}
				for (let key in allStreet) {
					if (key.indexOf(areaCode) !== -1) {
						obj[key] = allStreet[key]
					}
				}
				this.street = obj
			},
		},
		
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.get_all_property_list()//获取标签和显示的标签
		}
	}
</script>

<style lang="less">
.container {
	overflow: hidden;
	// border: 1px solid #000000;
	position: relative;
	
	& > .main {
		& > view {
			background-color: #FFFFFF;
			margin-top: 30rpx;
			padding: 30rpx 30rpx 0;
			& > .title {
				height: 40rpx;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				font-weight: bold;
				span {
					margin-left: 10rpx;
					font-size: 12px;
					color: rgba(64,33,16,0.50);
				}
			}
			& > .list {
				// border: 1px solid #000000;
				display: flex;
				flex-wrap: wrap;
				color: rgba(64,33,16,0.50);
				.add {
					width: 192rpx;
				}
				& > view {
					width: 150rpx;
					height: 60rpx;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #F2F2F2;
					border-radius: 2px;
				}
				.on {
					background: #FCC928;
					color: #402110;
				}
				& > view:nth-child(4n) {
					margin-right: 0;
				}
			}
		}
		& > .job-type {
			& > .list { 
				& > view {
					position: relative;
					background: #FCC928;
					color: #402110;
					& > image {
						position: absolute;
						right: -16rpx;
						top: -16rpx;
						z-index: 9;
						width: 32rpx;
						height: 32rpx;
					}
				}
				.add {
					background-color: #F2F2F2;
					color: rgba(64,33,16,0.50);
				}
			}
		}
		& > .expect-address {
			.pick {
				display: flex;
				flex-wrap: wrap;
				& > .add {
					width: 192rpx;
					color: rgba(64,33,16,0.50);
					background-color: #F2F2F2;
					border-radius: 2px;
				}
				& > view {
					width: 150rpx;
					height: 60rpx;
					margin-right: 30rpx;
					margin-bottom: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #FCC928;
					color: #402110;
					
				}
			}
		}
	}
		
	// 按钮
	& > .button {
		height: 100rpx;
		width: 100vw;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FCC928;
		&:active {
			opacity: 0.7;
		}
	}
	//弹框
	& > .modal {
		z-index: 11;
		position: fixed;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		background-color: rgba(0,0,0,0.40);
		
		& > .modal-main {
			position: fixed;
			bottom: 0;
			padding: 30rpx;
			background: #FFFFFF;
			box-shadow: 0 0 0 0 rgba(0,0,0,0.05) inset;
			border-radius: 17px 17px 0 0;
			& > .modal-title {
				margin-bottom: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 48rpx;
				& > text {
					font-weight: bold;
					font-size: 17px;
					letter-spacing: -0.41px;
				}
				& > image {
					position: absolute;
					right: 30rpx;
					width: 42rpx;
					height: 42rpx;
				}
			}
			& > .modal-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-bottom: 50rpx;
				// border: 1px solid;
				& > view {
					position: relative;
					width: 100rpx;
					height: 40rpx;
					padding: 10rpx 20rpx;
					margin: 0 10rpx;
					// margin-right: 30rpx;
					margin-bottom: 30rpx;
					border: 1px solid rgba(64,33,16,0.50);
					border-radius: 2px;
					text-align: center;
					& > image {
						position: absolute;
						right: 0rpx;
						bottom: 0;
						width: 24rpx;
						height: 24rpx;
					}
				}
				& > view:nth-child(4n) {
					// margin-right: 0;
				}
				.on {
					border-color: #FCC928;
					color: #F39B19;
				}
			}
			& > .buttons {
				display: flex;
				& > .button {
					width: 330rpx;
					height: 80rpx;
					border-radius: 2px;
					display: flex;
					align-items: center;
					justify-content: center;
					&:active {
						opacity: 0.7;
					}
				}
				.button:nth-child(1) {
					background: #FCC928;
					margin-right: 30rpx;
				}
				
				.button:nth-child(2) {
					background-color: #F39B19;
				}
			}
			
		}
		
	}
}
</style>
